<template>
    <div class="layout-container">
        <!-- 固定头部区域 -->
        <div class="fixed-header">
            <!-- 头部显示时间 -->
            <paper-answer-header :paper="paper?.paper" :status="paper?.status" :paper-score="paper?.paperScore" @on-paper-submit="onPaperSubmit" @on-back="onBack" />
            <!-- 进度条 -->
            <el-progress :percentage="percentage" :stroke-width="5" :text-inside="true" striped :status="status" striped-flow v-if="paper?.status === 1" />
        </div>

        <!-- 可滚动内容区域 -->
        <div class="scroll-content">
            <!-- 试卷描述，当状态为已阅卷时，才会显示用户得分 -->
            <paper-description :paper="paper?.paper" :paper-score="paper?.status === 2 ? null : paper?.paperScore" />

            <!-- 试卷信息和试题列表 -->
            <paper-answer-question-list :question-list="paper?.questionList" :status="paper?.status" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, inject } from "vue";
import PaperAnswerHeader from "@/views/system/components/paperAnswer/PaperAnswerHeader.vue";
import PaperDescription from "@/views/system/components/paper/PaperDescription.vue";
import PaperAnswerQuestionList from "@/views/system/components/paperAnswer/PaperAnswerQuestionList.vue";

//获取自定义全局方法
const { emitter, box, http, authStore } = inject<any>("method");

//父传子
interface Props {
    paper?: Record<string, any>;
}
const props = withDefaults(defineProps<Props>(), {
    paper: () => ({}),
});

//进度
const percentage = ref<number>(0);
const status = ref<string>("exception");
emitter.on("paper-answer-percentage", (payload: number) => {
    percentage.value = payload;
    if (payload <= 50) {
        status.value = "exception";
    } else if (payload <= 80) {
        status.value = "warning";
    } else if (payload <= 100) {
        status.value = "success";
    }
});

//提交（是否为自动交卷）
const onPaperSubmit = (isAuto: boolean) => {
    if (!isAuto) {
        const size = props.paper.questionList.length - authStore.examAnswerMap.size;
        const msg = size > 0 ? `您还有${size}题未作答，` : "";
        box.confirm(`${msg}确定要交卷吗？`, "交卷", () => {
            doSubmit();
        });
    } else {
        doSubmit();
    }
};

//交卷
const doSubmit = async () => {
    const data = await http.post(`paperAnswer/answer`, { paperId: props.paper.paper.id, answer: Object.fromEntries(authStore.examAnswerMap) });
    if (data?.success) {
        emitter.emit("msg-success", { message: data.data, duration: 3000 });
        authStore.clearExamAnswerMap();
        onBack();
    }
};

//使用defineEmits注册一个自定义事件
const emit = defineEmits(["on-back"]);

//返回
const onBack = () => emit("on-back");
</script>

<style scoped lang="less">
.layout-container {
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    .fixed-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        padding: 0 16px;
        flex-shrink: 0;
    }
    .scroll-content {
        flex: 1;
        overflow-y: auto;
        padding-top: 10px;
    }
}
</style>
